Vue 在畫面的呈現上會有一些基本的指令，接下來這幾天會跟著小任務一起了解一下 Vue 是如何使用指令運作。

Vue 模版語法

這裡先上一段官方的說法：

Vue 使用一種基於 HTML 的模板語法，使我們能夠聲明式的將其組件實例的數據綁定到呈現的DOM 上。所有的 Vue 模板都是語法層面合法的 HTML，可以被符合規範的瀏覽器和 HTML 解析器解析。

在底層機制中，Vue 會將模板編譯成高度優化的 JavaScript 代碼。結合響應式系統，當應用狀態變更時，Vue 能夠智能地推導出需要重新渲染的組件的最少數量，並應用最少的 DOM 操作。

不知道大家對於這一段是不是有點模模糊糊？其實光是看這一段至少是可以理解，模版語法就是使用 HTML 能夠解析並呈現畫面所需要使用的指令；在這個章節裡我們會介紹到三種小任務使用到的模版語法。

本文插值雙括號 {{ }}

最常見的畫面呈現方式就是雙括號，官方稱此語法為「Mustache」語法，呈現的方式為以下範例：

<span>Message: {{ msg }}</span>

雙括號內容此時會對應到 msg 屬性，並且當 msg 被改變的時候，雙括號的 msg 也會跟著一起變動。

內置指令 v-text、v-html

▸ v-text

將文字呈現在 HTML，與雙括號相同的作用。

<span v-text="msg"></span>

▸ v-html

將內容直接作為普通 HTML 插入，不過 Vue 官方不建議這種作法，因為很容易導致 XSS 攻擊。

<div v-html="html"></div>

另外還要注意的是，scoped 樣式不會作用於 v-html 裡的內容，因為 HTML 內容不會被 Vue 的模版編譯器解析。

➔

簡短說明了幾個指令，我們就來看看今天的小任務吧~

操作底下這個模板，執行下列要求：

1. 操作 class 為 Q1 的 div 標籤，將 HTML 畫面渲染如下(需要使用 {{}} 帶入 data 中的 money, debt)
2. 操作 class 為 Q2 的 div 標籤，使用 v-text 代入 data 的 rawHTML。
3. 操作 class 為 Q3 的 div 標籤，使用 v-html 代入 data 的 rawHTML。

CodePen：https://codepen.io/kimberly8/pen/XWEOEKx

解答：

<div id="app">
   <div class="Q1">
     小明有 {{money}} 元，扣掉負債 {{debt}} 元，剩下 {{money-debt}} 元
   </div>
   <div class="Q2" v-text="rawHTML">
   </div>
  <div class="Q3" v-html='rawHTML'>
   </div>
</div>

const app = {
  data() {
    return {
      money: 1000,
      debt: 700,
      rawHTML: '<a href="">點我獲得 100 萬</a>'
    }
  }
}
Vue.createApp(app).mount('#app')

好的，今天就先努力到這裡吧，如果觀念有理解錯誤的部分，也希望大家能夠留言糾正我，感謝收看~（鞠躬